<template>
  <div>
    <window
      title="生源学校"
      ref="win"
    >
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
        <div class="widget am-cf">

          <div class="am-u-sm-12 am-form ">

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-7">
              <SelectArea ref='area'></SelectArea>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <input
                  type="text"
                  v-model="query.schoolName"
                  placeholder="请输入学校名"
                />
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-1 am-u-end am-text-left">
              <div class="am-form-group">
                <button
                  type="button"
                  class="am-btn am-btn-default am-btn-success"
                  @click="search"
                ><span class="am-icon-search"></span>查询
                </button>
              </div>
            </div>

          </div>

          <div
            class="widget-body  am-fr"
            style="padding: 0px ;"
          >

            <div
              class="am-u-sm-12"
              v-if="total != 0"
            >
              <el-table
                :data="tableData"
                border
                stripe
                height="400"
                style="min-width: 100%"
              >
                <el-table-column
                  prop="schoolName"
                  label="校名"
                  min-width="200"
                >
                </el-table-column>
                <el-table-column
                  label="地址"
                  min-width="250"
                >
                  <template scope="scope">
                    {{scope.row.province }}{{scope.row.city }}{{scope.row.district }}{{scope.row.address}}
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  width="120"
                >
                  <template scope="scope">
                    <el-button
                      size="small"
                      @click.native="$emit('select' , scope.row );$refs.win.close()"
                    >确定
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="am-u-lg-12 am-cf">

            <div class="am-fr">
              <pagination
                v-bind:total="total"
                v-bind:pageNo="pageNo"
                v-bind:pageSize="pageSize"
                @paging="loadTableData"
              />
            </div>
          </div>

        </div>
      </div>
    </window>
  </div>
</template>

<script>
import Pagination from "../base/Pagination";

import io from "../../lib/io";
import Window from "../base/Window";
import SelectArea from "./selectArea.vue";

export default {
  data: function() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      query: {},
      searchConfig: {}
    };
  },
  components: {
    Window,
    Pagination,
    SelectArea
  },
  methods: {
    search: function() {
      this.loadTableData(1);
    },
    loadTableData: function(pageNo) {
      var _this = this;
      _this.pageNo = pageNo || _this.pageNo || 1;
      let { province, city, district } = _this.$refs.area.areaData;
      _this.query.province = province;
      _this.query.city = city;
      _this.query.district = district;
      localStorage.setItem('studentProvince', province)
      localStorage.setItem('studentCity', city)
      localStorage.setItem('studentDistrict', district)
      io.post(
        io.apiAdminStudentSchoolList,
        $.extend(
          {
            pageNo: _this.pageNo,
            pageSize: _this.pageSize
          },
          _this.query
        ),
        function(ret) {
          if (ret.success) {
            _this.total = ret.data.total;
            _this.tableData = ret.data.list;
          } else {
            _this.$alert(ret.desc);
          }
        }
      );
    },
    show: function() {
      this.$refs.win.show({
        width: 800,
        height: 500
      });
    }
  }
};
</script>
